<template>
	<view class="sign-verify">
		<u-toast ref="signVerify" />
		<navBar back="back" title="验证中" justCenter="justCenter"></navBar>
		<view class="verify-steps">
			<u-steps :current="current" inactiveColor="#ccc" activeColor="#FF2C2C" activeIcon="checkmark-circle-fill"
				inactiveIcon="error-circle-fill">
				<u-steps-item title="发送短信">
				</u-steps-item>
				<u-steps-item title="输入验证码"></u-steps-item>
				<u-steps-item title="验证完成"></u-steps-item>
			</u-steps>
		</view>

		<view v-if="smsShow">
			<view class="sms-verify">
				请输入验证码
			</view>
			<view class="code-text-title">
				已发送短信验证码至<text class="verify-steps-text-color">{{phone||'1**********'}}</text>
			</view>
			<view :style="{margin:'96rpx 0 0 0',textAlign:'center'}">
				<view class="task-grid-item">
					<input ref="yanzhengma" class="phone_code_single_cinput" adjust-position="false" auto-blur="true"
						@blur="blurcodeNumInputFun" @input="codeNumInputFun" :focus="focus" v-model="yzkey"
						type="number" maxlength="6" />
					<view class="task-grid-title" v-for="(item,index) in 6" :key="index" @click="inputCursor">
						<view v-if="yzkey[index]">
							{{yzkey[index] }}
						</view>
						<view v-else-if="!yzkey[index]&&isCode&&yzkey.length==index" class="task-grid-cursor">
							{{'|'}}
						</view>
					</view>
				</view>
				<!-- <u-code-input v-model="value5" :space="15" :maxlength="6" hairline mode="line"
					disabledDot></u-code-input> -->
			</view>
		</view>
		<view v-else>
			<view class="sms-verify">
				短信验证
			</view>
			<view class="sms-verify-steps">
				<view class="sms-steps">
					<view class="verify-steps-item">1</view>
					<view class="verify-steps-line"></view>
					<view class="verify-steps-item">2</view>
				</view>
				<view class="verify-steps-text">
					<text>请使用手机号
						<text class="verify-steps-text-color" :style="{fontWeight: 'bold'}">+86</text>
						<text class="verify-steps-text-color">{{phone||'1**********'}}</text>发送
						<text class="verify-steps-text-color">1</text>
						到
						<text class="verify-steps-text-color">106988881700511</text>
					</text>
					<text>发送成功后返回本页面进行下一步</text>
				</view>
			</view>
		</view>

		<view class="send-sms" @click="sendSmsBtn">
			{{smsShow?'确认提交，进行下一步':'已发送短信，进行下一步'}}
		</view>

		<view style="margin-top:5px;font-size: 26rpx;color:red;text-align: center;">
			注：请完成全部验证，中通退出小程序将注册失败
		</view>

		<view class="show-loading" v-if="showLoading">
			<u-loading-icon text="加载中" textSize="18" v-if="showLoading"></u-loading-icon>
		</view>
	</view>
</template>

<!-- 注册验证中 -->
<script>
	import navBar from '@/components/navBar/navBar.vue';
	import {
		myRequest
	} from '@/utiles/api.js'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				current: 0,
				phone: '',
				yzkey: '',
				isCode: false,
				focus: false,
				smsShow: false,
				Device_Sid: '',
				showLoading: false, //加载中
				signTimes: null
			}
		},
		onShow() {
			let storagePhone = uni.getStorageSync('phone') || ''
			if (storagePhone) {
				this.phone = storagePhone
			}
		},
		onLoad(options) {
			const {
				smsShow
			} = options
			this.smsShow = smsShow
			if (smsShow) {
				this.current = 1
			}
		},
		methods: {
			async sendSmsBtn() {
				const {
					yzkey,
					phone,
					smsShow,
					current
				} = this || {}
				if (smsShow && current === 1) {
					if (!yzkey || yzkey.length < 6) {
						this.$refs.signVerify.show({
							safeAreaInsetTop: true,
							type: 'error',
							message: '请输入正确的验证码',
							duration: 1000 * 2,
						})
					}
					if (!phone) return
					this.$refs.signVerify.show({
						type: 'loading',
						message: "加载中",
						duration: '60000',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
					})
					let {
						success,
						data,
						message
					} = await myRequest({
						prefix: 'https://www.jk334.cn/api/',
						url: `Applet/UploadCode`,
						method: 'POST',
						contentType: 'application/json',
						data: {
							phone: phone,
							code: yzkey,
						}
					})
					this.$refs.signVerify.clearTimer()
					if (success) {
						const {
							okStatus,
						} = data || {}

						if (okStatus == 4) {
							uni.navigateTo({
								url: '/pages/Signup/Signup'
							});
						} else if (okStatus == 6) {
							this.$refs.signVerify.show({
								type: 'error',
								message: '验证码错误,请重新输入',
							})
						}

					} else {
						this.$refs.signVerify.show({
							type: 'error',
							message: message,
						})
					}
				} else {
					this.smsShow = true
					this.current = 1
				}

			},
			codeNumInputFun(e) {
				let val = e.detail.value
				this.noteCode = val
				if (val.length == 6) this.isCode = false
				else this.isCode = true
			},
			blurcodeNumInputFun() {
				this.focus = false
				this.isCode = false
			},
			inputCursor() {
				this.focus = true
				this.isCode = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.sign-verify {
		background-image: url("https://www.jk334.cn/img/home-bg.png");
		background-size: 100% 332rpx;
		background-repeat: no-repeat;
		font-family: PingFang SC, PingFang SC;

		.verify-steps {
			margin: 120rpx 0 100rpx 0;
		}

		.sms-verify {
			margin: 0 70rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #323232;
		}

		.code-text-title {
			margin: 0 70rpx;
			margin-top: 30rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #323232;
		}

		.verify-steps-text-color {
			color: #0383E3;
		}

		.sms-verify-steps {
			margin: 0 70rpx;
			height: 220rpx;
			display: flex;

			.sms-steps {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.verify-steps-line {
					flex: 1;
					background: #CCC;
					width: 2rpx;
				}

				.verify-steps-item {
					width: 34rpx;
					height: 34rpx;
					text-align: center;
					line-height: 34rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #666666;
					border: 2rpx solid #CCCCCC;
					border-radius: 50%;
				}
			}



			.verify-steps-text {
				margin-left: 24rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 26rpx;
				font-weight: 400;
				color: #323232;


			}
		}

		.send-sms {
			margin: 0 auto;
			margin-top: 200rpx;
			width: 520rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background: #FFCD2C;
			border-radius: 80rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #393319;
		}

		.task-grid-item {
			padding: 0 70rpx;
			display: grid;
			/* 第一排有6个盒子 */
			grid-template-columns: repeat(6, 1fr);
			/* 盒子之间的间距 */
			grid-gap: 20rpx;
		}

		.task-grid-title {
			/* 每个盒子宽度为四分之一，并考虑间距 */
			// width: calc(25% - 4rpx);
			height: 80rpx;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 50rpx;
			font-weight: bold;
			color: #323232;
			/* 盒子之间的间距 */
			background: #F5F7F9;
			/* 让 padding 不会增加盒子的实际宽度 */
			box-sizing: border-box;
		}

		.task-grid-cursor {
			color: #f5222d;
			font-size: 40rpx;
			font-weight: normal;
			animation: fadeInOut 1s ease-in-out infinite;
		}

		@keyframes fadeInOut {
			0% {
				opacity: 0;
				/* 初始透明度为0 */
			}

			50% {
				opacity: 1;
				/* 中间透明度为1 */
			}

			100% {
				opacity: 0;
				/* 最终透明度为0 */
			}
		}

		.phone_code_single_cinput {
			position: fixed;
			left: -100rpx;
			width: 50rpx;
			height: 50rpx;
		}

		.show-loading {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>